﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <link rel="stylesheet" href="../styles/table-transparent.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>热表厂流程绩效看板</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .header-title {
      font-size: 24px !important;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .chart-title {
      text-align: center;
      padding-top: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
    }

    .chart {
      width: 100%;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
    }

    .water-wave {
      height: 200px;
    }

    .header-text {
      font-size: 22px;
      font-weight: bold;
      text-align: center;
      line-height: 60px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div style="padding:0 5px;">
      <div class="parallelogram header-outer">
        <el-row>
          <el-col :span="7" class="header-text">
            引领一线
          </el-col>
          <el-col :span="10" class="header-title">
            <div class="parallelogram header-inner">
              热表厂流程绩效看板
            </div>
          </el-col>
          <el-col :span="7" class="header-text">
            服务一线
          </el-col>
        </el-row>
      </div>

      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :label-position="'left'" :rules="rules"
        id="queryInfo" style="margin:10px">
        <el-form-item label="年月:" prop="yearmonth">
          <el-date-picker v-model="queryInfo.yearmonth" type="month" value-format="yyyy-MM" style="width: 120px;">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleBtnSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" style="margin:5px;margin-bottom: 0px;">
        <el-col :span="3">
          <div class="chart-title">人才培养</div>
          <div id="talentDevelopment" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">科研攻关</div>
          <div id="techResearch" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">质量管理</div>
          <div id="qualityManagement" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">主计划风险</div>
          <div id="mainplanManagement" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">过程管理</div>
          <div id="processManagement" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">生产保障</div>
          <div id="productionSupport" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">配送管理</div>
          <div id="deliveryManagement" class="chart water-wave"></div>
        </el-col>

        <el-col :span="3">
          <div class="chart-title">综合管理</div>
          <div id="generalManagement" class="chart water-wave"></div>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="margin:15px 5px;">
        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">技能矩阵</div>
            <div id="skillTargetChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">科研攻关</div>
            <div id="techResearchChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">质量提升</div>
            <div id="qualityImproveChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">快速响应</div>
            <div id="feedbackChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="margin:5px;margin-bottom: 0px;">
        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">齐套率</div>
            <div id="allSetChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">配送管理</div>
            <div id="deliveryChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">主计划风险</div>
            <div id="mainScheduleRiskChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="6">
          <dv-border-box-10>
            <div class="chart-title">会议纪要</div>
            <div id="meetingMinutesChart" class="chart" :style="{ height: chartHeight +'px' }"></div>
          </dv-border-box-10>
        </el-col>
      </el-row>

      <!-- 技能矩阵对话框 -->
      <el-dialog :title="skillTargetChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="skillTargetChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="skillTargetChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportSkillTargetChartDetails">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="skilltargetname"></el-table-column>
          <el-table-column label="班组" prop="teamname"></el-table-column>
          <el-table-column label="员工" prop="fullname"></el-table-column>
          <el-table-column label="指标执行情况" prop="processvalue">
            <template slot-scope="scope">
              {{scope.row.processvalue}}%
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="notes"></el-table-column>
        </el-table>
        <el-pagination @current-change="handleSkillTargetChartDetailCurrentChange"
          :current-page="skillTargetChartDetail.queryInfo.currentPage"
          :page-sizes="[skillTargetChartDetail.queryInfo.pageSize]"
          :page-size="skillTargetChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="skillTargetChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 科研攻关对话框 -->
      <el-dialog :title="techResearchChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="techResearchChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="techResearchChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportTechResearchChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="项目来源" prop="itemresource"></el-table-column>
          <el-table-column label="项目内容" prop="itemcontent"></el-table-column>
          <el-table-column label="措施" prop="itemfinishprogress"></el-table-column>
          <el-table-column label="要求完成时间" prop="needfinishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="责任人" prop="responseemployee"></el-table-column>
          <el-table-column label="责任单位" prop="responseteam"></el-table-column>
          <el-table-column label="完成进度" prop="schedule">
            <template slot-scope="scope">
              {{scope.row.schedule}}%
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleTechResearchChartDetailCurrentChange"
          :current-page="techResearchChartDetail.queryInfo.currentPage"
          :page-sizes="[techResearchChartDetail.queryInfo.pageSize]"
          :page-size="techResearchChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="techResearchChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 质量提升 -->
      <el-dialog :title="qualityImproveChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="qualityImproveChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="qualityImproveChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportQualityImproveChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="项目来源" prop="itemresource"></el-table-column>
          <el-table-column label="项目内容" prop="itemcontent"></el-table-column>
          <el-table-column label="措施" prop="itemfinishprogress"></el-table-column>
          <el-table-column label="要求完成时间" prop="needfinishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="责任人" prop="responseemployee"></el-table-column>
          <el-table-column label="责任单位" prop="responseteam"></el-table-column>
          <el-table-column label="完成进度" prop="schedule">
            <template slot-scope="scope">
              {{scope.row.schedule}}%
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleQualityImproveChartDetailCurrentChange"
          :current-page="qualityImproveChartDetail.queryInfo.currentPage"
          :page-sizes="[qualityImproveChartDetail.queryInfo.pageSize]"
          :page-size="qualityImproveChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="qualityImproveChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 主计划风险 -->
      <el-dialog :title="mainScheduleRiskChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="mainScheduleRiskChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="mainScheduleRiskChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportMainScheduleRiskChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="项目来源" prop="itemresource"></el-table-column>
          <el-table-column label="项目内容" prop="itemcontent"></el-table-column>
          <el-table-column label="措施" prop="itemfinishprogress"></el-table-column>
          <el-table-column label="要求完成时间" prop="needfinishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="责任人" prop="responseemployee"></el-table-column>
          <el-table-column label="责任单位" prop="responseteam"></el-table-column>
          <el-table-column label="完成进度" prop="schedule">
            <template slot-scope="scope">
              {{scope.row.schedule}}%
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleMainScheduleRiskChartDetailCurrentChange"
          :current-page="mainScheduleRiskChartDetail.queryInfo.currentPage"
          :page-sizes="[mainScheduleRiskChartDetail.queryInfo.pageSize]"
          :page-size="mainScheduleRiskChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="mainScheduleRiskChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 会议纪要 -->
      <el-dialog :title="meetingMinutesChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="meetingMinutesChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="meetingMinutesChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportMeetingMinutesChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="项目来源" prop="itemresource"></el-table-column>
          <el-table-column label="项目内容" prop="itemcontent"></el-table-column>
          <el-table-column label="措施" prop="itemfinishprogress"></el-table-column>
          <el-table-column label="要求完成时间" prop="needfinishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" :formatter="splitDate"></el-table-column>
          <el-table-column label="责任人" prop="responseemployee"></el-table-column>
          <el-table-column label="责任单位" prop="responseteam"></el-table-column>
          <el-table-column label="完成进度" prop="schedule">
            <template slot-scope="scope">
              {{scope.row.schedule}}%
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleMeetingMinutesChartDetailCurrentChange"
          :current-page="meetingMinutesChartDetail.queryInfo.currentPage"
          :page-sizes="[meetingMinutesChartDetail.queryInfo.pageSize]"
          :page-size="meetingMinutesChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="meetingMinutesChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 齐套率 -->
      <el-dialog :title="allSetChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="allSetChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="allSetChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportAllSetChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="批次号" prop="containername"></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="主制分厂" prop="fromfactoryname" width="100"></el-table-column>
          <el-table-column label="转工计划开始时间" prop="starttime" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.starttime">{{scope.row.starttime.replace('T',' ')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="转工计划完成时间" prop="endtime" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.endtime">{{scope.row.endtime.replace('T',' ')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="工艺类型" prop="spectypename" width="100"></el-table-column>
          <el-table-column label="工艺路线齐套" prop="iscompworkflow" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompworkflow === 1 ? 'success' : 'danger'">
                {{scope.row.iscompworkflow === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="排产数据齐套" prop="iscompaps" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompaps === 1 ? 'success' : 'danger'">
                {{scope.row.iscompaps === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工装工具齐套" prop="iscomptool" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscomptool === 1 ? 'success' : 'danger'">
                {{scope.row.iscomptool === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="生产物资齐套" prop="iscompmaterial" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompmaterial === 1 ? 'success' : 'danger'">
                {{scope.row.iscompmaterial === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="设备状态齐套" prop="iscompresource" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompresource === 1 ? 'success' : 'danger'">
                {{scope.row.iscompresource === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="特殊过程齐套" prop="iscompspotcheck" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompspotcheck === 1 ? 'success' : 'danger'">
                {{scope.row.iscompspotcheck === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="质量预警" prop="iscompquality" width="120">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.iscompquality === 1 ? 'success' : 'danger'">
                {{scope.row.iscompquality === 1 ? '是' : '否'}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleAllSetChartDetailCurrentChange"
          :current-page="allSetChartDetail.queryInfo.currentPage" :page-sizes="[allSetChartDetail.queryInfo.pageSize]"
          :page-size="allSetChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="allSetChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 快速响应 -->
      <el-dialog :title="mesFeedbackChartDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="mesFeedbackChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="mesFeedbackChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportMESFeedbackChartDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="提出人" prop="create_emp"></el-table-column>
          <el-table-column label="提出时间" prop="createdate" :formatter="replaceDate"></el-table-column>
          <el-table-column label="问题类型" prop="problemtype"></el-table-column>
          <el-table-column label="问题描述" prop="problem_feedback_title"></el-table-column>
          <el-table-column label="流程主管" prop="lczg_emp"></el-table-column>
          <el-table-column label="流程主管响应时间" prop="lczg_receive_date"></el-table-column>
          <el-table-column label="流程主管处理意见" prop="lczg_result"></el-table-column>
          <el-table-column label="响应状态" prop="status"></el-table-column>
        </el-table>
        <el-pagination @current-change="handleMESFeedbackChartDetailCurrentChange"
          :current-page="mesFeedbackChartDetail.queryInfo.currentPage"
          :page-sizes="[mesFeedbackChartDetail.queryInfo.pageSize]"
          :page-size="mesFeedbackChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="mesFeedbackChartDetail.total">
        </el-pagination>
      </el-dialog>
    </div>
  </div>

  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script src="../Scripts/echarts/echarts-liquidfill.min.js"></script>

  <script type="module">
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { exportExcelData, getParams } from '../Scripts/hooks/useCommonMethod.js'
    import { getUserInfo, getFactory } from '../Scripts/hooks/fetchAPI.js'
    import { splitDate, replaceDate } from '../Scripts/hooks/format.js'
    const app = new Vue({
      el: '#app',
      data: {
        baseApi: '../handler/board/RBWorkflowPerformanceDashBoard.ashx',
        splitDate, replaceDate,
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          factoryname: '',
          factoryid: '',
          yearmonth: '',
          startOfSelectMonth: '',
          endOfSelectMonth: ''
        },
        rules: {
          yearmonth: [
            { required: true, message: '【年月】不能为空', trigger: 'change' }
          ],
        },
        dataList: [],
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff' },
        chartHeight: (window.innerHeight - 470) / 2,
        // 技能矩阵
        skillTargetChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, processvalue: '' },
          dataList: [], title: '', total: 0
        },
        // 科研攻关
        techResearchChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, teamname: '', status: '未完成' },
          dataList: [], title: '', total: 0
        },
        // 质量提升
        qualityImproveChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, teamname: '', status: '未完成' },
          dataList: [], title: '', total: 0
        },
        // 快速响应
        mesFeedbackChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, status: '', problemtype: '' },
          dataList: [], title: '', total: 0
        },
        // 齐套率
        allSetChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, itemname: '', status: '未完成' },
          dataList: [], title: '', total: 0
        },
        // 主计划风险
        mainScheduleRiskChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, teamname: '', status: '未完成' },
          dataList: [], title: '', total: 0
        },
        // 会议纪要
        meetingMinutesChartDetail: {
          dialogVisiable: false,
          queryInfo: { currentPage: 1, pageSize: 12, teamname: '', status: '未完成' },
          dataList: [], title: '', total: 0
        }
      },
      methods: {
        // 初始化水球图配置
        initWaterPoloChart(value, color) {
          return {
            series: [{
              type: 'liquidFill',
              data: [value],
              radius: '80%',
              center: ['50%', '50%'],
              amplitude: '5%',
              waveLength: '60%',
              period: 2000,//波动频率
              waveAnimation: true,
              animationDuration: 1000,
              animationEasing: 'elasticOut',
              color: [color],
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                borderWidth: 0
              },
              outline: {
                show: true,
                borderDistance: 0,
                itemStyle: {
                  borderColor: color,
                  borderWidth: 2,
                  shadowBlur: 4,
                  shadowColor: color,
                  opacity: 0.5
                }
              },
              label: {
                normal: {
                  fontSize: 40,
                  fontWeight: 'bold',
                  color: color,
                  textShadowBlur: 2,
                  textShadowColor: 'rgba(0, 0, 0, 0.3)',
                  formatter: function (value) {
                    if (value.data === null) {
                      return '无数据';
                    } else {
                      return Number.isInteger(value.data * 100)
                        ? `${value.data * 100}%`
                        : `${(value.data * 100).toFixed(2)}%`
                    }
                  }
                }
              }
            }]
          }
        },
        // 水球图=======================
        // 人才培养
        async getTalentDevelopmentData() {
          const dom = document.getElementById('talentDevelopment');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getTalentDevelopmentData`, {
            type: 'getTalentDevelopmentData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { avgvalue } = data[0];
          echarts.dispose(dom);
          chart = echarts.init(dom);
          const option = this.initWaterPoloChart(avgvalue, '#1E9FFF');
          chart.setOption(option);
        },
        // 科研攻关
        async getTechResearchData() {
          const dom = document.getElementById('techResearch');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getTechResearchData`, {
            type: 'getTechResearchData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { ratevalue } = data[0];

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(ratevalue, '#1E9FFF');
          chart.setOption(option);
        },
        // 质量管理
        async getQualityManagementData() {
          const dom = document.getElementById('qualityManagement');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getQualityManagementData`, {
            type: 'getQualityManagementData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { ratevalue } = data[0];

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(ratevalue, '#1E9FFF');
          chart.setOption(option);
        },
        // 过程管理
        async getProcessManagementData() {
          const dom = document.getElementById('processManagement');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getProcessManagementData`, {
            type: 'getProcessManagementData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const map = [
            { label: '工艺路线齐套率', field: 'workflowrate' },
            { label: '排产数据齐套率', field: 'apsrate' },
            { label: '工装工具齐套率', field: 'toolrate' },
            { label: '生产物资齐套率', field: 'materialrate' },
            { label: '设备状态齐套率', field: 'resourcesrate' },
            { label: '特殊过程齐套率', field: 'spotcheckrate' },
            { label: '质量预警', field: 'qualityrate' },
            { label: '数控程序', field: 'ncprogramrate' }
          ];

          const arrRate = map.map(item => {
            return data[0][item.field] !== undefined ? data[0][item.field] : 0;
          });

          const sumRate = arrRate.reduce((prev, curr) => prev + curr, 0);


          const avgvalue = (sumRate / arrRate.length / 100).toFixed(4);

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(avgvalue, '#1E9FFF');

          chart.setOption(option);
        },
        // 生产保障
        async getProductionSupportData() {
          const dom = document.getElementById('productionSupport');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getProductionSupportData`, {
            type: 'getProductionSupportData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { avgvalue } = data[0];
          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(avgvalue, '#1E9FFF');

          chart.setOption(option);
        },
        // 配送管理
        async getDeliveryManagement() {
          const dom = document.getElementById('deliveryManagement');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getDeliveryManagement`, {
            type: 'getDeliveryManagement',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { ratevalue } = data[0];

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(ratevalue, '#1E9FFF');
          chart.setOption(option);
        },
        // 主计划风险
        async getMainPlanManagementData() {
          const dom = document.getElementById('mainplanManagement');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMainPlanManagementData`, {
            type: 'getMainPlanManagementData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { ratevalue } = data[0];

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(ratevalue, '#1E9FFF');
          chart.setOption(option);
        },
        // 综合管理
        async getGeneralManagementData() {
          const dom = document.getElementById('generalManagement');
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getGeneralManagementData`, {
            type: 'getGeneralManagementData',
            ...this.queryInfo
          })

          chart.hideLoading();

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          const { ratevalue } = data[0];

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const option = this.initWaterPoloChart(ratevalue, '#1E9FFF');
          chart.setOption(option);
        },

        /*柱状图*/
        // 技能矩阵--柱状图
        async getSkillTargetChart() {
          const dom = document.getElementById("skillTargetChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getSkillTargetChart`, {
            type: 'getSkillTargetChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrProcessValue = [], arrQty = [], arrTargetQty = [];
          data.forEach(i => {
            arrProcessValue.push(i.processvalue);//完成进度
            arrQty.push(i.qty);//实际值
            arrTargetQty.push(i.targetvalue);//目标值
          });

          let option = barOption();

          option.grid = { left: '3%', right: '3%', bottom: '5%', containLabel: true };
          option.xAxis.axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['目标值', '实际值'];//设置图例文字
          option.xAxis.data = arrProcessValue;

          option.series[0] = _.merge(option.series[0], {
            name: '目标值',
            data: arrTargetQty,
            barMaxWidth: 35,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '实际值',
            data: arrQty,
            barMaxWidth: 35,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          chart.setOption(option);

          window.addEventListener('resize',
            _.debounce(() => { chart.resize() }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            if (value === 0) { return; }
            this.skillTargetChartDetail.queryInfo.currentPage = 1;
            this.skillTargetChartDetail.queryInfo.processvalue = name;
            this.skillTargetChartDetail.dialogVisiable = true;
            this.skillTargetChartDetail.title = `技能矩阵指标${name}%人员明细`;
            this.getSkillTargetChartDetails();
          })
        },
        // 技能矩阵--柱状图明细
        async getSkillTargetChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getSkillTargetChartDetails`, {
            type: 'getSkillTargetChartDetails',
            ...this.queryInfo,
            ...this.skillTargetChartDetail.queryInfo,
            title: this.skillTargetChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.skillTargetChartDetail.dataList = data;
          this.skillTargetChartDetail.total = total;
        },
        // 技能矩阵--柱状图明细导出
        exportSkillTargetChartDetails() {
          const config = {
            url: `${this.baseApi}?action=exportSkillTargetChartDetails`,
            data: {
              type: 'exportSkillTargetChartDetails',
              ...this.queryInfo,
              ...this.skillTargetChartDetail.queryInfo,
              title: this.skillTargetChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 科研攻关--柱状图
        async getTechResearchChart() {
          const dom = document.getElementById("techResearchChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getTechResearchChart`, {
            type: 'getTechResearchChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrTeamname = [], arrFinishRate = [], arrunFinishRate = [];
          data.forEach(i => {
            arrTeamname.push(i.responseteam);
            arrFinishRate.push(i.finishrate);
            arrunFinishRate.push(i.unfinishrate);
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率', '未完成率'];//设置图例文字
          option.xAxis.data = arrTeamname;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });
          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '未完成率',
            data: arrunFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.red.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => { chart.resize() }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            //if (value === 100) { return this.$message.error('仅可查看【完成进度】小于100%明细数据'); }
            this.techResearchChartDetail.queryInfo.currentPage = 1;
            this.techResearchChartDetail.queryInfo.processvalue = name;
            this.techResearchChartDetail.queryInfo.teamname = name;
            this.techResearchChartDetail.queryInfo.status = seriesName;
            this.techResearchChartDetail.dialogVisiable = true;
            this.techResearchChartDetail.title = `科研攻关【${name}】未完成明细`;
            this.getTechResearchChartDetails();
          })
        },
        // 科研攻关--柱状图明细
        async getTechResearchChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getTechResearchChartDetails`, {
            type: 'getTechResearchChartDetails',
            ...this.queryInfo,
            ...this.techResearchChartDetail.queryInfo,
            itemresource: '科研攻关计划',
            title: this.techResearchChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.techResearchChartDetail.dataList = data;
          this.techResearchChartDetail.total = total;
        },
        // 科研攻关柱--状图明细导出
        exportTechResearchChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportTechResearchChartDetail`,
            data: {
              type: 'exportTechResearchChartDetail',
              ...this.queryInfo,
              ...this.techResearchChartDetail.queryInfo,
              title: this.techResearchChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 质量提升--柱状图
        async getQualityImproveChart() {
          const dom = document.getElementById("qualityImproveChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getQualityImproveChart`, {
            type: 'getQualityImproveChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrTeamname = [], arrFinishRate = [], arrunFinishRate = [];
          data.forEach(i => {
            arrTeamname.push(i.responseteam);
            arrFinishRate.push(i.finishrate);
            arrunFinishRate.push(i.unfinishrate)
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率', '未完成率'];//设置图例文字
          option.xAxis.data = arrTeamname;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });
          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '未完成率',
            data: arrunFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.red.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => { chart.resize(); }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            //if (value === 100) { return this.$message.error('仅可查看【完成进度】小于100%明细数据'); }
            this.qualityImproveChartDetail.queryInfo.currentPage = 1;
            this.qualityImproveChartDetail.queryInfo.processvalue = name;
            this.qualityImproveChartDetail.queryInfo.teamname = name;
            this.qualityImproveChartDetail.queryInfo.status = seriesName;
            this.qualityImproveChartDetail.dialogVisiable = true;
            this.qualityImproveChartDetail.title = `质量提升计划【${name}】未完成明细`;
            this.getQualityImproveChartDetails();
          })
        },
        // 质量提升--柱状图明细
        async getQualityImproveChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getQualityImproveChartDetails`, {
            type: 'getQualityImproveChartDetails',
            ...this.queryInfo,
            ...this.qualityImproveChartDetail.queryInfo,
            title: this.qualityImproveChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.qualityImproveChartDetail.dataList = data;
          this.qualityImproveChartDetail.total = total;
        },
        // 质量提升--柱状图明细导出
        exportQualityImproveChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportQualityImproveChartDetail`,
            data: {
              type: 'exportQualityImproveChartDetail',
              ...this.queryInfo,
              ...this.qualityImproveChartDetail.queryInfo,
              title: this.qualityImproveChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 快速响应
        async getMESFeedbackChart() {
          const dom = document.getElementById("feedbackChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMESFeedbackChart`, {
            type: 'getMESFeedbackChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrProblemtype = [], arrCompleted_qty = [], arrUnCompleted_qty = [], arrTotal_qty = [];
          data.forEach(i => {
            arrProblemtype.push(i.problemtype);
            arrCompleted_qty.push(i.completed_qty);
            arrUnCompleted_qty.push(i.uncompleted_qty);
            arrTotal_qty.push(i.total_qty);
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };

          option.legend.data = ['总任务数', '未响应', '已关闭'];//设置图例文字
          option.xAxis.data = arrProblemtype;

          option.series[0] = _.merge(option.series[0], {
            name: '总任务数',
            data: arrTotal_qty,
            barMaxWidth: 35,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '未响应',
            data: arrUnCompleted_qty,
            barMaxWidth: 35,
            label: { color: colorList.red.color },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          option.series[2] = _.merge(_.cloneDeep(option.series[0]), {
            name: '已关闭',
            data: arrCompleted_qty,
            type: 'line',
            symbolSize: 10,
            lineStyle: { width: 3, color: colorList.blue.color },
            label: { color: colorList.blue.color },
            itemStyle: { color: colorList.blue.color },
            //yAxisIndex: 1
          });
          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            if (value === 0) { return; }
            this.mesFeedbackChartDetail.queryInfo.currentPage = 1;
            this.mesFeedbackChartDetail.queryInfo.status = seriesName;
            this.mesFeedbackChartDetail.queryInfo.problemtype = name;
            this.mesFeedbackChartDetail.queryInfo.factoryname = this.queryInfo.factoryname;
            this.mesFeedbackChartDetail.queryInfo.startOfSelectMonth = this.queryInfo.startOfSelectMonth;
            this.mesFeedbackChartDetail.queryInfo.endOfSelectMonth = this.queryInfo.endOfSelectMonth;
            this.mesFeedbackChartDetail.dialogVisiable = true;
            this.mesFeedbackChartDetail.title = `【${name}】【${seriesName}】明细`;
            this.getMESFeedbackChartDetails();
          })
        },
        // 快速响应--柱状图明细
        async getMESFeedbackChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMESFeedbackChartDetails`, {
            type: 'getMESFeedbackChartDetails',
            ...this.mesFeedbackChartDetail.queryInfo,
            title: this.mesFeedbackChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.mesFeedbackChartDetail.dataList = data;
          this.mesFeedbackChartDetail.total = total;
        },
        // 快速响应--柱状图明细导出
        exportMESFeedbackChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportMESFeedbackChartDetail`,
            data: {
              type: 'exportMESFeedbackChartDetail',
              ...this.queryInfo,
              ...this.mesFeedbackChartDetail.queryInfo,
              title: this.mesFeedbackChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 主计划风险--柱状图
        async getMainScheduleRiskChart() {
          const dom = document.getElementById("mainScheduleRiskChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMainScheduleRiskChart`, {
            type: 'getMainScheduleRiskChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrTeamname = [], arrFinishRate = [], arrunFinishRate = [];
          data.forEach(i => {
            arrTeamname.push(i.responseteam);
            arrFinishRate.push(i.finishrate);
            arrunFinishRate.push(i.unfinishrate);
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率', '未完成率'];//设置图例文字
          option.xAxis.data = arrTeamname;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });
          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '未完成率',
            data: arrunFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.red.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });
          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            //if (value === 100) { return this.$message.error('仅可查看【完成进度】小于100%明细数据'); }
            this.mainScheduleRiskChartDetail.queryInfo.currentPage = 1;
            this.mainScheduleRiskChartDetail.queryInfo.processvalue = name;
            this.mainScheduleRiskChartDetail.queryInfo.teamname = name;
            this.mainScheduleRiskChartDetail.queryInfo.status = seriesName;
            this.mainScheduleRiskChartDetail.dialogVisiable = true;
            this.mainScheduleRiskChartDetail.title = `主计划风险【${name}】未完成明细`;
            this.getMainScheduleRiskChartDetails();
          })
        },
        // 主计划风险--柱状图明细
        async getMainScheduleRiskChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMainScheduleRiskChartDetails`, {
            type: 'getMainScheduleRiskChartDetails',
            ...this.queryInfo,
            ...this.mainScheduleRiskChartDetail.queryInfo,
            title: this.mainScheduleRiskChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.mainScheduleRiskChartDetail.dataList = data;
          this.mainScheduleRiskChartDetail.total = total;
        },
        // 主计划风险--柱状图明细导出
        exportMainScheduleRiskChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportMainScheduleRiskChartDetail`,
            data: {
              type: 'exportMainScheduleRiskChartDetail',
              ...this.queryInfo,
              ...this.mainScheduleRiskChartDetail.queryInfo,
              title: this.mainScheduleRiskChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 会议纪要--柱状图
        async getMeetingMinutesChart() {
          const dom = document.getElementById("meetingMinutesChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMeetingMinutesChart`, {
            type: 'getMeetingMinutesChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrTeamname = [], arrFinishRate = [], arrunFinishRate = [];
          data.forEach(i => {
            arrTeamname.push(i.responseteam);
            arrFinishRate.push(i.finishrate);
            arrunFinishRate.push(i.unfinishrate);
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率', '未完成率'];//设置图例文字
          option.xAxis.data = arrTeamname;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });
          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '未完成率',
            data: arrunFinishRate,
            barMaxWidth: 35,
            label: { color: colorList.red.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });
          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            //if (value === 100) { return this.$message.error('仅可查看【完成进度】小于100%明细数据'); }
            this.meetingMinutesChartDetail.queryInfo.currentPage = 1;
            this.meetingMinutesChartDetail.queryInfo.processvalue = name;
            this.meetingMinutesChartDetail.queryInfo.teamname = name;
            this.meetingMinutesChartDetail.queryInfo.status = seriesName;
            this.meetingMinutesChartDetail.dialogVisiable = true;
            this.meetingMinutesChartDetail.title = `会议纪要【${name}】未完成明细`;
            this.getMeetingMinutesChartDetails();
          })
        },
        // 会议纪要--柱状图明细
        async getMeetingMinutesChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getMeetingMinutesChartDetails`, {
            type: 'getMeetingMinutesChartDetails',
            ...this.queryInfo,
            ...this.meetingMinutesChartDetail.queryInfo,
            title: this.meetingMinutesChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.meetingMinutesChartDetail.dataList = data;
          this.meetingMinutesChartDetail.total = total;
        },
        // 会议纪要--柱状图明细导出
        exportMeetingMinutesChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportMeetingMinutesChartDetail`,
            data: {
              type: 'exportMeetingMinutesChartDetail',
              ...this.queryInfo,
              ...this.meetingMinutesChartDetail.queryInfo,
              title: this.meetingMinutesChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 配送管理--柱状图
        async getDeliveryChart() {
          const dom = document.getElementById("deliveryChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getDeliveryChart`, {
            type: 'getDeliveryChart',
            ...this.queryInfo,
            yearmonth: dayjs(this.queryInfo.yearmonth).startOf('month').format('YYYYMM')
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrItemtypename = [], arrDeliveryrate = [];
          data.forEach(i => {
            arrItemtypename.push(i.itemtypename);
            arrDeliveryrate.push(i.deliveryrate);
          });

          let option = barOption();

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率'];//设置图例文字
          option.xAxis.data = arrItemtypename;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrDeliveryrate,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );
        },
        // 齐套率--柱状图
        async getAllSetChart() {
          const dom = document.getElementById("allSetChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getAllSetChart`, {
            type: 'getAllSetChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          const map = [
            { label: '工艺路线齐套率', field: 'workflowrate' },
            { label: '排产数据齐套率', field: 'apsrate' },
            { label: '工装工具齐套率', field: 'toolrate' },
            { label: '生产物资齐套率', field: 'materialrate' },
            { label: '设备状态齐套率', field: 'resourcesrate' },
            { label: '特殊过程齐套率', field: 'spotcheckrate' },
            { label: '质量预警', field: 'qualityrate' },
            { label: '数控程序', field: 'ncprogramrate' }
          ];

          const arrItemname = map.map(item => item.label);
          const arrQty = map.map(item => {
            return data[0][item.field] !== undefined ? data[0][item.field] : null;
          });

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 4 });

          option.grid = { left: '3%', right: '3%', bottom: '15%', containLabel: true };
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加%

          option.legend.data = ['完成率'];//设置图例文字
          option.xAxis.data = arrItemname;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率',
            data: arrQty,
            barMaxWidth: 35,
            label: { color: colorList.green.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          chart.setOption(option);
          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            if (value === 100) { return this.$message.error('仅可查看【齐套率】小于100%明细数据'); }
            this.allSetChartDetail.queryInfo.currentPage = 1;
            this.allSetChartDetail.queryInfo.itemname = name;
            this.allSetChartDetail.dialogVisiable = true;
            this.allSetChartDetail.title = `【${name}】未齐套明细`;
            this.getAllSetChartDetails();
          })
        },
        // 齐套率--柱状图明细
        async getAllSetChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${this.baseApi}?action=getAllSetChartDetails`, {
            type: 'getAllSetChartDetails',
            ...this.queryInfo,
            ...this.allSetChartDetail.queryInfo,
            title: this.allSetChartDetail.title
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.allSetChartDetail.dataList = data;
          this.allSetChartDetail.total = total;
        },
        // 齐套率--柱状图明细导出
        exportAllSetChartDetail() {
          const config = {
            url: `${this.baseApi}?action=exportAllSetChartDetail`,
            data: {
              type: 'exportAllSetChartDetail',
              ...this.queryInfo,
              ...this.allSetChartDetail.queryInfo,
              title: this.allSetChartDetail.title
            }
          }
          exportExcelData(config, this);
        },
        // 查询按钮
        handleBtnSearch() {
          this.$refs['queryInfoRef'].validate(async (valid) => {
            if (valid) {
              this.queryInfo.startOfSelectMonth = dayjs(this.queryInfo.yearmonth).startOf('month').format('YYYY-MM-DD');
              this.queryInfo.endOfSelectMonth = dayjs(this.queryInfo.yearmonth).endOf('month').format('YYYY-MM-DD');

              this.getTalentDevelopmentData();//人才培养--水球图
              this.getTechResearchData();//科研攻关--水球图
              this.getQualityManagementData();//质量管理--水球图
              this.getProcessManagementData();//过程管理--水球图
              this.getProductionSupportData();//生产保障--水球图
              this.getDeliveryManagement();//配送管理--水球图
              this.getMainPlanManagementData();//主计划风险--水球图
              this.getGeneralManagementData();//综合管理--水球图

              this.getSkillTargetChart();//技能矩阵柱状图
              this.getTechResearchChart();//科研攻关柱状图
              this.getQualityImproveChart();//质量提升柱状图
              this.getMainScheduleRiskChart();//主计划风险柱状图
              this.getMeetingMinutesChart();//会议纪要柱状图
              this.getDeliveryChart();//配送管理柱状图
              this.getAllSetChart();//齐套率柱状图
              this.getMESFeedbackChart();//快速响应
            }
          })
        },
        // 技能矩阵--钻取分页
        handleSkillTargetChartDetailCurrentChange(newPage) {
          this.skillTargetChartDetail.queryInfo.currentPage = newPage;
          this.getSkillTargetChartDetails();
        },
        // 科研攻关--钻取分页
        handleTechResearchChartDetailCurrentChange(newPage) {
          this.techResearchChartDetail.queryInfo.currentPage = newPage;
          this.getTechResearchChartDetails();
        },
        // 质量提升--钻取分页
        handleQualityImproveChartDetailCurrentChange(newPage) {
          this.qualityImproveChartDetail.queryInfo.currentPage = newPage;
          this.getQualityImproveChartDetails();
        },
        // 快速响应--钻取分页
        handleMESFeedbackChartDetailCurrentChange(newPage) {
          this.mesFeedbackChartDetail.queryInfo.currentPage = newPage;
          this.getMESFeedbackChartDetails();
        },
        // 齐套率--钻取分页
        handleAllSetChartDetailCurrentChange(newPage) {
          this.allSetChartDetail.queryInfo.currentPage = newPage;
          this.getAllSetChartDetails();
        },
        // 主计划风险--钻取分页
        handleMainScheduleRiskChartDetailCurrentChange(newPage) {
          this.mainScheduleRiskChartDetail.queryInfo.currentPage = newPage;
          this.getMainScheduleRiskChartDetails();
        },
        // 会议纪要--钻取分页
        handleMeetingMinutesChartDetailCurrentChange(newPage) {
          this.meetingMinutesChartDetail.queryInfo.currentPage = newPage;
          this.getMeetingMinutesChartDetails();
        }
      },
      async mounted() {
        window.addEventListener('resize',
          _.debounce(() => {
            this.chartHeight = (window.innerHeight - 470) / 2;
          }, 200)
        );

        const factoryid = Decrypt(getParams('factoryid'));
        this.queryInfo.factoryid = factoryid;
        const factoryInfo = await getFactory({ factoryid: factoryid });
        if (factoryInfo) {
          const { factoryname } = factoryInfo[0];
          this.queryInfo.factoryname = factoryname;
        }

        this.queryInfo.yearmonth = dayjs().format('YYYY-MM');
        this.handleBtnSearch();
      }
    })
  </script>
</body>

</html>